<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图类</title>
</head>
<body>
    
</body>
</html>
<script src="./jquery-3.4.1.js"></script>
<script>
  

    // 地图类
    // width(宽), height（高）,step（速度）， bg_img(背景图)，bg_top（背景图移动）
    class MAP{
        constructor(json){
            let default_obj ={
                width:"480px",
                height:"700px",
                step:1,
                bg_img:"img/bg.jpg",
                bg_top:0
            }
            for(let key in default_obj){
                if(json[key]!=undefined){
                    this[key] = json[key];
                }else{
                    this[key] = default_obj[key];
                }
            }
            this.$mp = $("<div></div>");
            this.father = document.body;
            this.timer  = null;
        }
        create_ui(){
            this.$mp.css({
                "margin":"0 auto",
                "width":this.width,
                "height":this.height,
                "background-image":"url("+this.bg_img+")",
                "background-position-y":this.bg_top+"px",
            });
            this.father.appendChild(this.$mp[0]);
        }
        move(){
            this.timer = setInterval(()=>{
                this.bg_top += this.step;
                if(this.bg_top>=853){
                    this.bg_top = 0;
                }
                this.$mp.css({"background-position-y":this.bg_top+"px"});
            },10)
        }
        start(){
            this.create_ui();
            this.move();
        }
    }
    
    let map = new MAP({});
    map.start();
</script>